<script setup>
import { ref } from 'vue'
import { useBookingStore } from '@/stores'

const BookingStore = useBookingStore()

const emits = defineEmits('closeProp')

// 获取表单实例
const form = ref(null)

const nameRegex = /^(?:[\u4e00-\u9fa5·]{2,16})$/

// 手机号验证正则表达式
const phoneRegex = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/

// 身份证号验证正则表达式
const idCardRegex = /^(?=.{18}$)[1-9]\d{5}(?:19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/

// 表单绑定的数据
const formModel = ref({
	name: '',
	phone: '',
	idCard: ''
})

// 表单验证规则
const rules = ref({
	name: [
		{ pattern: nameRegex, message: '请输入正确的姓名', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (!value) {
					callback(new Error('姓名不能为空'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	],
	phone: [
		{ pattern: phoneRegex, message: '请输入正确的手机号', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (!value) {
					callback(new Error('手机号码不能为空'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	],
	idCard: [
		{ pattern: idCardRegex, message: '请输入正确的身份证号', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (!value) {
					callback(new Error('身份证号不能为空'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	]
})

// 清空表单域
const clearFormData = () => {
	form.value.resetFields()
	form.value.clearValidate()
}

// 保存出行人员信息
const onClickSave = () => {
	// 验证表单数据
	form.value.validate().then(async (valid) => {
		if (valid) {
			await BookingStore.addVisitorData({ ...formModel.value })
			clearFormData()
			emits('closeProp')
		}
	})
}

defineExpose({
	clearFormData
})
</script>

<template>
	<view class="container">
		<view class="header">新增出行人</view>
		<up-form :model="formModel" :rules="rules" ref="form">
			<up-form-item labelWidth="80" prop="name" label="真实姓名">
				<up-input placeholder="请输入姓名" border="bottom" v-model.trim="formModel.name" type="text"></up-input>
			</up-form-item>
			<up-form-item labelWidth="80" prop="phone" label="联系电话">
				<up-input placeholder="请输入手机号码" border="bottom" maxlength="11" type="number" v-model.trim="formModel.phone"></up-input>
			</up-form-item>
			<up-form-item labelWidth="80" prop="idCard" label="身份证号">
				<up-input maxlength="18" placeholder="请输入身份证号" border="bottom" v-model.trim="formModel.idCard" type="number"></up-input>
			</up-form-item>
		</up-form>

		<view class="save-btn" @tap="onClickSave">保存</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 80rpx 0 200rpx 0;

	.header {
		font-size: 35rpx;
		padding-bottom: 50rpx;
	}

	.save-btn {
		width: 80%;
		padding: 20rpx;
		margin-top: 50rpx;
		border-radius: 999px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
	}
}
</style>
